<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>您正在做的业务是:</el-breadcrumb-item>
      <el-breadcrumb-item>生产设计</el-breadcrumb-item>
      <el-breadcrumb-item>产品档案管理</el-breadcrumb-item>
      <el-breadcrumb-item>产品档案登记复核</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="选择一级种类名称:">
        <el-select v-model="pid,value" placeholder="选择一级种类" @change="changeLevel2(value)">
          <el-option value='' label="请选择"></el-option>
          <el-option @click.native="getPid(item.pid)"
                     v-for="item in fileKind"
                     :key="item.id"
                     :label="item.kindName"
                     :value="item.id">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="选择二级种类名称:" v-if="fileKind2!=null&&fileKind2!=''">
        <el-select v-model="value2" placeholder="选择二级种类" @change="changeLevel3(value2)">
          <el-option value='' label="请选择"></el-option>
          <el-option
              v-for="item in fileKind2"
              :key="item.id"
              :label="item.kindName"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择三级种类名称:" v-if="fileKind3!=null&&fileKind3!=''">
        <el-select v-model="value3" placeholder="选择三级种类">
          <el-option value='' label="请选择"></el-option>
          <el-option
              v-for="item in fileKind3"
              :key="item.id"
              :label="item.kindName"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="产品名称:">
          <el-input v-model="name" placeholder="产品名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="init2">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
          :data="tableData11"
          style="width: 100%">
        <el-table-column
            label="产品编号"
            width="180"
            prop="productId">
        </el-table-column>
        <el-table-column
            label="产品名称"
            width="180"
            prop="productName">
        </el-table-column>
        <el-table-column
            label="用途类型"
            width="180">
          <!--prop="type"        -->
          <template slot-scope="scope">
            <p v-if="tableData11[scope.$index].type=='Y001-1'">商品</p>
            <p v-if="tableData11[scope.$index].type=='Y001-2'">物料</p>
          </template>
        </el-table-column>
        <el-table-column
            label="档次级别"
            width="180">
          <!--  prop="productClass"        -->
          <template slot-scope="scope">
            <p v-if="tableData11[scope.$index].productClass=='D001-1'">高档</p>
            <p v-else-if="tableData11[scope.$index].productClass=='D001-2'">中档</p>
            <p v-else-if="tableData11[scope.$index].productClass=='D001-3'">低档</p>
            <p v-else-if="tableData11[scope.$index].productClass=='null'||tableData11[scope.$index].productClass==''"
               style="color: red">数据展示错误</p>
          </template>
        </el-table-column>
        <el-table-column
            label="一级种类名称"
            width="180"
            prop="firstKindName">
        </el-table-column>
        <el-table-column
            label="二级种类名称"
            width="180"
            prop="secondKindName">
        </el-table-column>
        <el-table-column
            label="三级种类名称"
            width="180"
            prop="thirdKindName">
        </el-table-column>
        <el-table-column
            label="产品经理"
            width="180"
            prop="responsiblePerson">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="复核"
            width="160">
          <template slot-scope="scope">

            <!--          -->
            <el-button @click="checkFile(scope.row)" type="text" size="medium ">复核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          :current-page="Number(pageNum)"
          :page-sizes="[2, 4, 8, 16]"
          :page-size="Number(pageSize)"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)">
      </el-pagination>
    </div>
    <div>
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">

        <el-divider content-position="left">主信息</el-divider>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
          <el-form-item label="产品名称" prop="productName">
            <el-input v-model="ruleForm.productName"></el-input>
          </el-form-item>
          <el-form-item label="制造商" prop="factoryName">
            <el-input v-model="ruleForm.factoryName"></el-input>
          </el-form-item>
          <el-form-item label="产品简称" prop="productNick">
            <el-input v-model="ruleForm.productNick"></el-input>
          </el-form-item>
          <el-form-item label="选择一级种类名称:">
            <el-select v-model="pid,value" placeholder="选择一级种类" @change="changeLevel2(value)" ref="selectCh">
              <el-option value='' label="请选择"></el-option>
              <el-option @click.native="getPid(item.pid)"
                         v-for="item in fileKind"
                         :key="item.id"
                         :label="item.kindName"
                         :value="item.id">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="选择二级种类名称:" v-if="fileKind2!=null&&fileKind2!=''">
            <el-select v-model="value2" placeholder="选择二级种类" @change="changeLevel3(value2)" ref="selectCh">
              <el-option value='' label="请选择"></el-option>
              <el-option
                  v-for="item in fileKind2"
                  :key="item.id"
                  :label="item.kindName"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择三级种类名称:" v-if="fileKind3!=null&&fileKind3!=''">
            <el-select v-model="value3" placeholder="选择三级种类" @change="changeLevel4(value3)" ref="selectCh">
              <el-option value='' label="请选择"></el-option>
              <el-option
                  v-for="item in fileKind3"
                  :key="item.id"
                  :label="item.kindName"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用途类别" prop="type">
            <el-select v-model="ruleForm.type" placeholder="请选择用途类别">
              <el-option label="商品" value="Y001-1"></el-option>
              <el-option label="物料" value="Y001-2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="档次级别" prop="productClass">
            <el-select v-model="ruleForm.productClass" placeholder="请选择档次级别">
              <el-option label="高档" value="D001-1"></el-option>
              <el-option label="中档" value="D001-2"></el-option>
              <el-option label="低档" value="D001-3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计量单位" prop="personalUnit">
            <el-input v-model="ruleForm.personalUnit"></el-input>
          </el-form-item>
          <el-form-item label="计量值" prop="personalValue">
            <el-input v-model="ruleForm.personalValue"></el-input>
          </el-form-item>
          <el-form-item label="市场单价" prop="listPrice">
            <el-input v-model="ruleForm.listPrice"></el-input>
          </el-form-item>
          <el-form-item label="计划成本单价" prop="costPrice">
            <el-input v-model="ruleForm.costPrice"></el-input>
          </el-form-item>

          <el-divider content-position="left">辅助信息</el-divider>
          <el-form-item label="保修期" prop="warranty">
            <el-input v-model="ruleForm.warranty"></el-input>
          </el-form-item>
          <el-form-item label="替代品名称" prop="twinName">
            <el-input v-model="ruleForm.twinName"></el-input>
          </el-form-item>
          <el-form-item label="替代品编号" prop="twinId">
            <el-input v-model="ruleForm.twinId"></el-input>
          </el-form-item>
          <el-form-item label="生命周期(年)" prop="lifecycle">
            <el-input v-model="ruleForm.lifecycle"></el-input>
          </el-form-item>
          <el-form-item label="单位" prop="amountUnit">
            <el-input v-model="ruleForm.amountUnit"></el-input>
          </el-form-item>
          <el-form-item label="产品描述" prop="productDescribe">
            <el-input type="textarea" v-model="ruleForm.productDescribe"></el-input>
          </el-form-item>
          <el-form-item label="产品经理" prop="responsiblePerson">
            <el-input v-model="ruleForm.responsiblePerson"></el-input>
          </el-form-item>
          <!--<el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>-->
        </el-form>

        <span slot="footer" class="dialog-footer">
    <el-button @click="resetForm('ruleForm')">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">复核通过</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import request from "../../request.js"

export default {
  name: "checkFile",
  data() {
    return {
      tableData11: [],
      dialogVisible: false,
      formInline: {
        user: '',
        region: ''
      },
      //表单数据
      fileKind2: [],
      fileKind3: [],
      fileKind: [],
      value: '', value2: '',
      value3: '',
      value4: '',
      pid: '',
      ruleForm: {
        productName: '',
        factoryName: '',
        productNick: '',
        type: '',
        productClass: '',
        firstKindId: '',
        firstKindName: '',
        secondKindId: '',
        secondKindName: '',
        thirdKindId: '',
        thirdKindName: '',
        warranty: '',
        twinName: '',
        twinId: '',
        lifecycle: '',
        amountUnit: '',
        productDescribe: '',
        responsiblePerson: '',
        personalValue: '',
        personalUnit: '',
        listPrice: '',
        costPrice: '',
      },
      rules: {
        productName: [
          {required: true, message: '请输入产品名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        type: [
          {required: true, message: '请选择用途类别', trigger: 'change'}
        ],
        productClass: [
          {required: true, message: '请选择档次级别', trigger: 'change'}
        ],
        firstKindId: [
          {required: true, message: '请选择一级分类', trigger: 'change'}
        ],
        secondKindId: [
          {required: true, message: '请选择二级分类', trigger: 'change'}
        ],
        thirdKindId: [
          {required: true, message: '请选择三级分类', trigger: 'change'}
        ],

        listPrice: [
          {required: true, message: '请输入市场单价', trigger: 'blur'},
          {message: '市场单价不能为空', trigger: 'blur'}
        ],
        costPrice: [
          {required: true, message: '请输入计划成本单价', trigger: 'blur'},
          {message: '计划成本单价不能为空', trigger: 'blur'}
        ],
      }, name: '', pageNum: '', pageSize: '', total: ''
    }
  },
  methods: {
    changeLevel2(id) {

      console.log("value:" + id)
      let a = 0;
      for (let i = 0; i < this.fileKind.length; i++) {
        for (let j = 0; j < this.fileKind[i].list.length; j++) {
          if (id === this.fileKind[i].list[j].pid) {
            this.fileKind2[a] = this.fileKind[i].list[j];
            a++;
          } else {
            this.fileKind2 = [];
            this.fileKind3 = [];
            this.value2 = '';
            this.value3 = '';
          }
        }

      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
    changeLevel22(id) {

      console.log("value:" + id)
      let a = 0;
      for (let i = 0; i < this.fileKind11.length; i++) {
        for (let j = 0; j < this.fileKind11[i].list.length; j++) {
          if (id === this.fileKind11[i].list[j].pid) {
            this.fileKind22[a] = this.fileKind11[i].list[j];
            a++;
          } else {
            this.fileKind22 = [];
            this.fileKind33 = [];
            this.value22 = '';
            this.value33 = '';
          }
        }

      }
    },
    changeLevel33(id) {
      //  console.log(id)
      let a = 0;

      for (let i = 0; i < this.fileKind22.length; i++) {
        for (let j = 0; j < this.fileKind22[i].list.length; j++) {
          if (id == this.fileKind22[i].list[j].pid) {
            console.log(this.fileKind22[i].list[j].pid)
            this.fileKind33[a] = this.fileKind22[i].list[j];
            a++;
          } else {
            this.fileKind33 = [];
            this.value33 = '';
          }
        }
      }
    },
    changeLevel3(id) {
      //  console.log(id)
      let a = 0;

      for (let i = 0; i < this.fileKind2.length; i++) {
        for (let j = 0; j < this.fileKind2[i].list.length; j++) {
          if (id == this.fileKind2[i].list[j].pid) {
            console.log(this.fileKind2[i].list[j].pid)
            this.fileKind3[a] = this.fileKind2[i].list[j];
            a++;
          } else {
            this.fileKind3 = [];
            this.value3 = '';
          }
        }
      }
    },
    init2() {
      // console.log(this.pageNum)
      axios.get("http://localhost:8150/file/queryProduct", {
        params: {
          firstId: this.value,
          secondId: this.value2,
          threeId: this.value3,
          name: this.name,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          checkTag: 'S001-0',
        }
      }).then(data => {
        if (data.data.flag==false){
          this.$message({
            showClose:true,
            message:data.data.message,
            type:data.data.flag==true?"success":"error"
          })
          return;
        }
        this.tableData11 = data.data.data.records;
        this.pageNum = data.data.data.current;
        this.pageSize = data.data.data.size;
        this.total = data.data.data.total;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      this.init2();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      console.log(`当前页: ${val}`);
      this.init2();
    },
    checkFile(scope) {
      this.ruleForm = scope;
      this.dialogVisible = true;
      /*this.$confirm('确认通过？')
          .then(data => {
            done();
          })
          .catch(_ => {});*/
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post("http://localhost:8150/file/checkFile", this.ruleForm).then(resp => {
            if (resp.data.flag==false){
              this.$message({
                showClose:true,
                message:resp.data.message,
                type:resp.data.flag==true?"success":"error"
              })
              return;
            }
            if (resp.data.flag) {
              this.init2();
            }
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: resp.data.flag == true ? 'success' : 'error'
            });
          }).catch(e => {
            alert("错误提示:" + e);
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    resetForm(formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
    },
    getSelectValue() {
      axios.get("http://localhost:8150/config-file-kind/displayType").then(data => {
        this.fileKind = data.data.data;
      }).catch(e => {
        alert("错误信息为:" + e)
      });
    },
    getPid(id) {
      this.pid = id;
    }
  },
  created() {
    this.getSelectValue();
    this.init2();
  }
}
</script>

<style scoped>

</style>